<template>
  <div class="flight">
    <div class="title">
      <input class="input" v-model="flight" @focus="changeInput" 
      @change="finishInput" ref="input" placeholder="请输入航班信息">
    </div>
    <div class="hidetitle" @click="hidetitle"></div>
  </div>
</template>
<script>

// 引入这个页面需要的方法
import {mapMutations} from 'vuex'
export default {
  data () {
    return {
      flight: ''
    }
  },
  mounted () {
    this.$refs.input.focus()
  },
  methods: {
    hidetitle () {
        this.$emit('hidetitles')
    },
    // 输入框获得焦点的时候触发
    changeInput () {},
    // 用户完成输入的时候触发
    finishInput () {
      let message = this.flight
      this.setFlightInfo(message)
      this.setShowFlightInfo(false)
    },
    ...mapMutations({
      setFlightInfo: 'SET_FLIGHTINFO',
      setShowFlightInfo: 'SET_SHOWFLIGHTINFO'
    })
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.flight
  position: fixed
  top: 0
  bottom: 0
  left: 0
  right: 0
  z-index: 99
  width: 100%
  height: 100%
  bordr: 1px solid red
  background-color: rgba(153, 153, 153, .5)
  .hidetitle
    height: 65vh
    width: 100%
  .title
    height: 50px
    width: 100%
    margin-top: 40px
    background-color: #fff
    .input
      width: 100%
      height: 100%
      text-indent: 20px
      outline: none
      font-size: 12px
</style>